<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="" prop="budgetProjectCode">
          <el-input
            v-model="queryParams.budgetProjectCode"
            placeholder="预算项目编号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="" prop="category">
              <el-select v-model="queryParams.category" size="small" placeholder="类别（预算大类）" style="width:100%" clearable>
                <el-option
                  v-for="(item,index) in CategoryList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item prop="classify">
                <el-select
                  filterable
                    v-model="queryParams.classify"
                    placeholder="分类（预算子类）"
                    clearable
                    size="small"
                    style="width:100%"
                    @keyup.enter.native="handleQuery"
                >
                 <el-option
                    v-for="(item,index) in ClassifyList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </el-form-item>
        </el-col>
             <el-col :span="6">
            <el-form-item label="" prop="budgetProjectName">
              <el-input
                v-model="queryParams.budgetProjectName"
                placeholder="预算项目名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item>
                <el-select
                    v-model="queryParams.department"
                    placeholder="所属部门"
                    clearable
                    size="small"
                    style="width:100%"
                    @keyup.enter.native="handleQuery"
                >
                 <el-option
                    v-for="(item,index) in departmentList"
                    :key="index"
                    :label="item"
                    :value="item"
                    />
                </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="" prop="budget">
                <el-input
                    v-model="queryParams.budget"
                    placeholder="预算总金额"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                    />
            </el-form-item>
        </el-col>
        </el-row>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
      
    </el-form>

    <el-row :gutter="10" class="mb8">
    
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="excutionList">
      <!-- <el-table-column type="selection" width="55" align="center" fixed/> -->
      <el-table-column type="index" width="55" label="序号" fixed align="center" />
      <el-table-column label="预算项目编号" fixed align="center" prop="budgetProjectCode"  width="180" >
        <template slot-scope="scope">
          <el-link type="primary" @click="handleDetail(scope.row)">{{scope.row.budgetProjectCode}}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="类别（预算大类）" align="center"  width="230" prop="category" show-overflow-tooltip></el-table-column>
      <el-table-column label="分类（预算子类）" align="center" prop="classify" width="230" show-overflow-tooltip></el-table-column>
      <!-- <el-table-column label="预算总金额" align="center" prop="totalAmount" width="180"></el-table-column> -->
      <el-table-column label="预算项目名称"  align="center" prop="budgetProjectName" width="230"  show-overflow-tooltip/>
      <el-table-column label="所属部门"  align="center" prop="department" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column label="预算总金额" sortable align="center" prop="budget" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column label="备注" align="center"  prop="note" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="290">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit-outline"
            @click="handleAdjust(scope.row)"
          >申请预算调整</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-coordinate"
              @click="handlExecute(scope.row)"
            >申请预算执行</el-button>
            <!-- <el-button
              size="mini"
              type="text"
              icon="el-icon-coordinate"
              @click="handleEdit(scope.row)"
            >修改</el-button> -->
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleDetail(scope.row)"
            >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
     <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="title" :visible.sync="open" @close="vformDialog" :close-on-click-modal="false" width="60%" append-to-body>
      <VformRenders v-if="open" :hisAmount="hisAmount" :budget="budget" @vformDialog="vformDialog" :formData="formData" :definitionId="definitionId" :code="Code"></VformRenders>
    </el-dialog>



    <div class="container">
        <el-dialog title="新增预算执行" :visible.sync="dialogVisible">
            <div>
                <p style="color:red">*为必填项</p>
            </div>
            <div>
                <el-form name-width="120px" name-position="right" >
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item attr="预算项目编号" prop="budgetProjectCode"></el-form-item>
                                <el-input placeholder="预算项目编号" disabled v-model="form.budgetProjectCode"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="category"></el-form-item>
                                <el-input placeholder="类别（预算大类）" v-model="form.categorys"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="classify"></el-form-item>
                                <el-input placeholder="分类（预算子类）" v-model="form.classify"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="budgetProjectName"></el-form-item>
                                <el-input placeholder="预算项目名称" disabled v-model="form.budgetProjectName"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="budgetSource"></el-form-item>
                                <el-input placeholder="预算来源" v-model="form.budgetSource"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="budgetTotalAmount"></el-form-item>
                                <el-input placeholder="预算总金额" v-model="form.budgetTotalAmount"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="budgetBalance"></el-form-item>
                                <el-input placeholder="预算余额" v-model="form.budgetBalance"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="contractAmount"></el-form-item>
                                <el-input placeholder="合同金额" v-model="form.contractAmount"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="contractExecutionAmount"></el-form-item>
                                <el-input placeholder="合同执行金额" v-model="form.contractExecutionAmount"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="contractExecutionBalance"></el-form-item>
                                <el-input placeholder="合同执行余额" v-model="form.contractExecutionBalance"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="executionProjectName"></el-form-item>
                                <el-input placeholder="执行项目名称" v-model="form.executionProjectName"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="executingDepartment"></el-form-item>
                                <el-input placeholder="执行部门" v-model="form.executingDepartment"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="executionPeriod"></el-form-item>
                                <el-input placeholder="执行期数" v-model="form.executionPeriod"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="executionDeadline"></el-form-item>
                                <el-input placeholder="执行期限" v-model="form.executionDeadline"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="historicalExecutionAmount"></el-form-item>
                                <el-input placeholder="历史执行金额" v-model="form.historicalExecutionAmount"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="currentExecutionAmount"></el-form-item>
                                <el-input placeholder="本次执行金额" v-model="form.currentExecutionAmount"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="executionStatus"></el-form-item>
                                <el-input placeholder="执行状态" v-model="form.executionStatus"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="executionDate" ></el-form-item>
                                <el-time-picker v-model="form.executionDate" style="width:100%" placeholder="执行日期"></el-time-picker>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="btn">
                <el-button size="middle" style="width:200px">返回</el-button>
                <el-button type="primary" size="middle" style="width:200px">保存</el-button>
            </div>
        </el-dialog>
    </div>
    </div>
</template>

<script>
import {
  BudgetAdd,
  BudgetByDepartmentList,
  BudgetDel,
  BudgetEdit,
  budget_department,
  BudgetCategory,
  BudgetClassify,
  getBudgetStatus
} from '@/api/financial/budgetExecution'
// import { getTaskName } from '@/api/administeration/askForLeave.js';
import { getEquForm } from "@/api/operations/equipment.js";
import { exportExe } from "@/api/operations/IpAddress.js";
export default {
    name: 'budgeExecution',
    data() {
      return {
          total:0,
          showSearch: true,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          open: false,
          detailVisible: false,
          formData: {},
          definitionId: null,
          excutionList: [],
          loading: false,
          dialogVisible: false,
          queryParams: {
              budget:null,
              budgetProjectCode: '',
              category: '',
              budgetProjectName: '',
              budgetSources: '',
              budgetTotalAmount: '',
              budgetBalance: '',
              department: '',
              executionPeriod: '',
              executionDeadline: '',
              pageSize:10,
              pageNum:1
          },
          form: {
            
          },
          deptOptions: [],
          sourcesList: [],
          departmentList: [],
          Code: 'CODE_YS',
          budget: null,
          CategoryList: [],
          title: "",
        ClassifyList: [],
        // 历史总金额
          hisAmount:{},
        }
    },
  created() {
    this.getList()
  },
    
    methods: {
       // 部门查询
       inItPage() {
        budget_department().then(res => {
          for(let i = 0;i<res.data.length;i++){
            this.departmentList.push(res.data[i].dictLabel)
          }
        })
      },
      classify() {
        BudgetClassify().then(res => {
            const {data} = res
            this.ClassifyList = data
          })
        },
      category() {
        BudgetCategory().then(res => {
          const {data} = res
          this.CategoryList = data
        })
      },
      handleDetail(row) {
        this.$router.push({
        path: '/workflow/process/financedetail',
        query: {
          processed: false,
          budgetProjectCode: row.budgetProjectCode,
          category: row.category
        }
      })
      },
      vformDialog() {
      this.open = false
    },
      // 申请预算执行
      async handlExecute(row) {
        const resSum = await getBudgetStatus(row.id)
        this.hisAmount = { ...resSum.data,readonly:true }
        const res = await getEquForm({processName: '预算执行'})
        this.formData = res.data.form
        this.definitionId = res.data.process.definitionId
        this.budget = row
        this.title = '预算执行申请'
        this.open = true
      },
      // 申请预算调整
      async handleAdjust(row) {
        this.hisAmount = {}
        const res = await getEquForm({processName: '预算调整'})
        this.formData = res.data.form
        this.definitionId = res.data.process.definitionId
        this.budget = row
        this.title = '预算调整申请'
        this.open = true
      },
       // 多选框选中数据
      handleSelectionChange(selection) {
        // this.ids = selection.map(item => item.projectCode);
        // console.log(this.ids);
        // this.single = selection.length !== 1;
        // this.multiple = !selection.length;
      },
      // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.budgetProjectCode);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 导出按钮操作 */
    handleExport() {
      console.log(this.ids);
      let list = [];
      if(this.ids.length > 0){
        this.ids.forEach(ele => {
         let  obj = this.excutionList.find(item => item.budgetProjectCode==ele);
          list.push(obj)
        });
        console.log(list,"88888888888888");
        exportExe(list).then(res=>{
          if(res){
          const blob = new Blob([res],{type: 'application/vnd.ms-excel'});
          const fileName ="预算执行管理表.xlsx";
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
            this.$refs.multipleTable.clearSelection();
          }

       })

      }
    },
    getList(){
       this.loading = true;
       BudgetByDepartmentList(this.queryParams).then(res => {
            this.excutionList = res.rows
            this.total = res.total
           
          this.loading = false;
       })
          this.classify()
          this.category()
          this.inItPage() 
    },
      // 预算执行列表
      handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
         
        },
        resetQuery() {
          this.queryParams= {
             budgetProjectCode: '',
                category: '',
                budgetProjectName: '',
                budgetSources: '',
                budgetTotalAmount: '',
                budgetBalance: '',
                department: '',
                executionPeriod: '',
                executionDeadline: '',
                pageSize:10,
                pageNum:1
          }
          this.getList();
        },
      handleAdd() {
        this.dialogVisible = true
      }
    }
}

</script>

<style lang="scss" scoped>
.btn {
    margin-top: 10px;
    }
</style>
